<template>
	<view>
		<my-public :currentIndex="currentIndex" :navList="navList" :navIndex="navIndex"></my-public>
		<view class="none" v-if="videoList.length == 0">没有数据</view>
		<view class="cont">
			<view class="contItem" v-for="(item,index) in videoList" :key="index" @tap="videoDetail(index)" :style="item.img_url ? 'background: url('+ item.img_url  + ')no-repeat' : 'background: url(/static/defaultImgUrl.png)no-repeat'">
				<view class="item">
					<view class="title" v-html="item.title"></view>
					<view class="info">
						<image :src="item.avatar ? item.avatar : defimg" @tap.stop="person(item.user_id)"></image>
						<view class="up" :class="[item.is_like == 2 ? 'zan_active' : '']" @tap.stop="giveUp(item.video_id,item.is_like,index)">
							<i class="iconfont1 iconzan"></i>
							<text v-if="item.likenum < 10000">{{item.likenum}}</text>
							<text v-else>{{item.likenum / 10000}}w</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="videoList.length > 6" :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import myPublic from './components/myPublic.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default{
		components: {
			myPublic,
			uniLoadMore
		},
		data() {
			return {
				currentIndex: 1,
				navList: [],
				navIndex: 0,
				buttomIndex: 1,
				videoList: [],
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				isBottom: false,
				pagesize:8,
				defimg: this.defimg
			}
		},
		onBackPress(e) {
			if(e.from=="backbutton"){
				uni.reLaunch({
					url:'/pages/index/index'
				})
				}
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.getVideo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getVideo();
			}, 500);
		},
		onShow() {
			this.reload = true;
			this.page = 1;
			this.getVideo();
			var _this = this;
			// uni.hideTabBar({
			// 	success:function(){
			// 		_this.isBottom = true;
			// 	}
			// })
		},
		methods:{
			/* 获取作品列表 */
			getVideo() {
				var data = {
					page: this.page,
					pagesize: this.pagesize,
					lists_type: 1
				}
				this.$zapi.apiPost('user/video.Lists/VideoList',data).then(res=>{
					if (res.data.code == 200) {
						var list = res.data.data.data;
						for(var i = 0; i <list.length; i++) {
							list[i].title = list[i].title.replace(/&lt;/g, '<');
							list[i].title = list[i].title.replace(/&gt;/g, '>');
						}
						this.videoList = this.reload ? list : this.videoList.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.videoList = [];
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			/* 点赞 & 取消点赞 */
			giveUp(video_id, is_like, index) {
				var state = 0;
				if (is_like == 2) {
					state = 1;
				} else {
					state = 2;
				}
				var data = {
					video_id: video_id,
					is_like: state
				}
				this.$zapi.apiPost('user/video.Lists/isLike', data).then(res => {
					if (res.data.code == 200) {
						if (is_like == 2) {
							this.videoList[index].is_like = 0;
							this.videoList[index].likenum--;
						} else {
							this.videoList[index].is_like = 2;
							this.videoList[index].likenum++;
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			/* 跳转视频详情 */
			videoDetail(index) {
				uni.navigateTo({
					url: 'videoDetail?index='+index+'&pagesize='+this.pagesize+'&type=1'
				})
			},
			/* 跳转个人主页 */
			person(user_id) {
				var myId = uni.getStorageSync('userInfo').id;
				if(myId == user_id) {
					uni.navigateTo({
						url: 'index'
					})
				} else {
					uni.navigateTo({
						url: 'index?user_id='+ user_id
					})
				}
			}
		}
	}
</script>

<style>
	.cont{
		padding: 256upx 30upx 120upx;
		display: flex;
		justify-content: flex-start;
		flex-flow: wrap;
	}
	.none {
		position: absolute;
		width: 100%;
		color: #999999;
		text-align: center;
		margin-top: 200upx;
	}
	.contItem{
		position: relative;
		width: 48%;
		height: 460upx;
		margin: 0 7upx 10upx;
		border-radius: 8upx;
		background-size: 100% 100% !important;
	}
	.item{
		position: absolute;
		bottom: 0;
		width: calc(100% - 50upx);
		padding: 0 20upx 0 30upx;
		background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
	}
	.title{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #FFFFFF;
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10upx;
	}
	.info image{
		width: 50upx;
		height: 50upx;
		border-radius: 50%;
	}
	.up{
		color: #FFFFFF;
		display: flex;
		align-items: center;
	}
	.up i{
		font-size: 50upx;
		line-height: 1;
	}
	.zan_active {
		color: #FF4E78 !important;
	}
	
	.zan_active i {
		color: #FF4E78;
	}
</style>
